<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  props: {
    iconClass: {
      type: String,
      require: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return `svg-icon ${this.className}`
      } else {
        return 'svg-icon'
      }
    }
  },
  data () {
    return {
    }
  },
}
</script>

<style scoped>
.svg-icon {
  width: 1.2em;
  height: 1.2em;
  fill: rgb(215, 226, 238);
  overflow: hidden;
  vertical-align: middle;
}
.tb_title {
  fill: rgb(99, 99, 99);
  font-size: 16px;
}
/* navbar icon */
.weixin_clr {
  fill: #0cab53;
  font-size: 26px;
}
.phone_clr {
  fill: #5897fb;
  font-size: 23px;
}
.msg_clr {
  fill: #5897fb;
  font-size: 22px;
}
.exit_clr {
  fill: rgb(99, 99, 99);
  font-size: 20px;
}
/* common */
.green_clr {
  fill: #0cab53;
  font-size: 18px;
}
.grey_clr {
  fill: rgb(99, 99, 99);
  font-size: 18px;
}
.red_clr {
  fill: rgb(230, 18, 18);
  font-size: 18px;
}
.blue_clr {
  fill: #5897fb;
  font-size: 18px;
}
/* phone icon */
.ph_org_clr {
  fill: #ff7733;
}
.ph_gen_clr {
  fill: #0cab53;
}
.ph_red_clr {
  fill: rgb(230, 18, 18);
}
.ph_grey_clr {
  fill: rgb(99, 99, 99);
}
/* weixin navbar tabs */
.multiple_window {
  font-size: 10px;
  position: absolute;
  bottom: 3px;
  right: 9px;
}
.active_multiple_window {
  fill: rgb(230, 230, 230);
}
.normal_multiple_window {
  fill: rgb(33, 33, 33);
}
/* chat */
.zyh_chat {
  font-size: 16px;
  fill: rgb(99, 99, 99);
}
.font15 {
  font-size: 15px;
}
.margtp6 {
  margin-top: 6px;
}
</style>
